header {
      /* background-color: #333; */
	  background: #1d213d;
      color: #fff;
      padding: 10px;
      text-align: center;
	  display: flex; /* 使用flex布局 */
	  align-items: center; /* 垂直居中 */
    }

	header img{
		height: 100%; /* 图片高度与header高度相同 */
		width: 400px;
		padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
	}
	header h1 {
	    flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
	    text-align: center; /* 水平居中 */
	    color: #fff; /* 设置标题颜色为白色 */
	    margin: 0; /* 去掉默认的margin */
	}
    nav {
      background-color: #f4f4f4;
      padding: 10px;
    }

    nav a {
      display: inline-block;
      padding: 5px 10px;
      margin: 5px;
      color: #333;
      text-decoration: none;
    }

    nav a:hover {
      background-color: #333;
      color: #fff;
    }
	
	#login{
		display: inline-block;
		padding: 5px 10px;
		margin: 5px;
		color: #333;
		text-decoration: none;
		border: none; /* 消除边框 */
		float: right;/*登录按键靠最右*/
		background-color: transparent; /* 设置背景色为透明 */
		transition: color 0.3s; /* 添加过渡效果，使颜色变化更平滑 */
	}
	#login:hover {
	    color: #958181; /* 鼠标悬停时修改文字颜色 */
	}

    .container {
     /* max-width: 1200px; */
      margin: auto;
		padding-left: 10%;
		padding-right: 10%;
		padding-bottom: 7%;
	  overflow: auto;
    }
	
	/* 自定义滚动条样式 */
	.container {
	  scrollbar-width: thin; /* "auto" 或 "thin"，适用于 Firefox */
	  scrollbar-color: darkgray lightgray; /* 滚动条颜色 */
	}
	.container::-webkit-scrollbar {
	  width: 10px; /* 设置滚动条宽度 */
	}
	.container::-webkit-scrollbar-track {
	  background: lightgray; /* 设置滚动条轨道的背景色 */
	}
	.container::-webkit-scrollbar-thumb {
	  background-color: darkgray; /* 设置滚动条手柄颜色 */
	  border-radius: 5px; /* 设置滚动条手柄的圆角 */
	}


    .resources {
      /* display: grid; */
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 20px;
    }

    .resource {
		border-radius: 15px;
		background-color: #30313308;
		padding: 20px;
    }

    .free-resources {
      margin-bottom: 40px;
    }

    .paid-resources {
      margin-bottom: 40px;
    }

    footer {
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  padding: 10px 0;
      background-color: #1d213d;
      color: #fff;
      text-align: center;
      padding: 10px;
    }

    /* Media Queries for Mobile Devices */
    @media (min-width: 768px) {
      .resources {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .resources {
        grid-template-columns: repeat(3, 1fr);
      }
    }
	.resource {
	  align-content: center;
	  height: 100%;
	  /* grid-template-columns: auto 1fr; */ /* 左侧宽度自适应图片大小，右侧占据剩余空间 */
	  /* grid-gap: 20px; *//* 设置网格间距 */
	}
	
	.resource img {
	  width: 90%;
	  height: 80%;/* 图片宽度最大为父元素宽度 */
	}
	
	.resource .content {
	  /* 不需要额外设置，内容部分会自动占据剩余空间 */
	}
	
	.resource h3 {
	  margin-top: 0; /* 去除标题顶部的默认间距 */
	}
	
	.resource p {
	  margin-top: 0; /* 去除段落顶部的默认间距 */
		word-wrap: break-word;
	}


	.pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
	}

	.pagination a {
		color: #333;
		padding: 8px 16px;
		text-decoration: none;
		border: 1px solid #ccc;
		margin: 0 5px;
		cursor: pointer;
	}

	.pagination a.active {
		background-color: #4CAF50;
		color: white;
	}
	.pagination div:hover {
		background-color: #e6e6e6;
	}
	.pagination input {
		width: 40px;
		border: 1px solid #ccc;
		padding: 5px;
		text-align: center;
	}

	.pagination input[type="button"] {
		cursor: pointer;
	}
	#pageTotal{
		display: flex;
		align-items:center;
	}